<!--
* @author wn
* @date 2023/08/08 14:29:18
* @description: 商品分类
!-->
<template>
	<CategorySkeleton v-if="isLoading">骨架屏</CategorySkeleton>
	<template v-else>
		<!-- 搜索框 -->
		<view class="search">
			<view class="input icon-search"> 女靴 </view>
		</view>
		<!-- 分类 -->
		<view class="categories">
			<!-- 左侧：一级分类 -->
			<scroll-view class="primary" scroll-y>
				<view
					v-for="(item, index) in primaryList"
					:key="item.id"
					class="item"
					:class="{ active: index === activeIndex }"
					@tap="activeIndex = index"
				>
					{{ item.name }}
				</view>
			</scroll-view>
			<!-- 右侧：二级分类 -->
			<scroll-view class="secondary" scroll-y>
				<!-- 焦点图 -->
				<XtxSwiper :list="bannerList" />
				<!-- 内容区域 -->
				<view v-for="item in secondaryList" :key="item.id">
					<view class="title">
						<text class="name">{{ item.name }}</text>
						<navigator class="more icon-right-after" hover-class="none">
							全部
						</navigator>
					</view>
					<view class="flow">
						<NavigatorGoods
							v-for="good in item.goods"
							:key="good.id"
							:good="good"
							class="nth"
						/>
					</view>
				</view>
			</scroll-view>
		</view>
	</template>
</template>
<script lang="ts" setup>
import { getHomeBannerApi } from '@/api/home'
import { getCategoryTopApi } from '@/api/category'
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import CategorySkeleton from './components/CategorySkeleton.vue'

// 是否加载中标记 -- 用于骨架屏
const isLoading = ref(true)

// 获取轮播图数据
const bannerList = ref<BannerItem[]>([])
const getBannerList = async () => {
	const list = await getHomeBannerApi(2)
	bannerList.value = list
}

// 获取 分类所有数据 Primary-secondary
const primaryList = ref<CategoryPrimary[]>([])
const getCategoryTop = async () => {
	const list = await getCategoryTopApi()
	primaryList.value = list
}

// secondary 计算得出
const activeIndex = ref(0)
const secondaryList = computed(
	() => primaryList.value[activeIndex.value].children || []
)

// 页面加载 -- Api调用
onLoad(async () => {
	isLoading.value = true
	await Promise.all([getBannerList(), getCategoryTop()])
	isLoading.value = false
})
</script>
<style lang="scss">
/* .viewport {
	height: 100%;
	display: flex;
	flex-direction: column;
} */
.search {
	padding: 20rpx 30rpx;
	background-color: #fff;
	.input {
		display: flex;
		// align-items: center;
		line-height: 64rpx;
		height: 64rpx;
		padding-left: 26rpx;
		color: #8b8b8b;
		font-size: 28rpx;
		border-radius: 32rpx;
		background-color: #f7f7f7;
	}
	.icon-search {
		&::before {
			margin-right: 10rpx;
		}
	}
}

/* 分类 */
.categories {
	display: flex;
	// flex: 1;
	min-height: 400rpx;
}
/* 一级分类 */
.primary {
	/*
  * common 中所有 scroll-view 都是 flex:1
  * 这里 俩 scroll-view 会平分  所以 取消
  */
	flex: none;
	width: 180rpx;
	// background-color: #f6f6f6;
	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 96rpx;
		line-height: 95rpx;
		font-size: 26rpx;
		color: #595c63;
		// position: relative;

		// 下方横线
		&::after {
			content: '';
			width: 96rpx;
			height: 1rpx;
			background-color: #e3e4e7;
		}
	}
	// 左边绿线
	/* 	.active {
		background-color: #fff;
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 8rpx;
			height: 100%;
			background-color: #27ba9b;
		}
	} */
	.active {
		background-color: #fff;
		border-left: 8rpx solid $primary-color;
	}
	// 选中的 和 最后一个 没有 下面横线
	.item:last-child::after,
	.active::after {
		display: none;
	}
}

/* 二级分类 */
.secondary {
	background-color: #fff;
	padding: 0 30rpx 20rpx;
	.carousel {
		height: 200rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}
	.title {
		display: flex;
		justify-content: space-between;
		height: 60rpx;
		line-height: 60rpx;
		color: #333;
		font-size: 28rpx;
		border-bottom: 1rpx solid #f7f7f8;
		.more {
			padding-left: 20rpx;
			font-size: 86%;
			color: #999;
			/* 			&::after {
				font-family: 'rabbit' !important;
				content: '\e6c2';
			} */
		}
	}
	.flow {
		display: flex;
		flex-wrap: wrap;
		margin: 20rpx 0 0;
		.nth {
			margin: 0rpx 30rpx 20rpx 0;
			&:nth-child(3n) {
				margin-right: 0;
			}
			.navigator-goods {
				width: 150rpx;
				padding: 0;
				margin-bottom: 0;
				border-radius: 0;
				.image {
					width: 150rpx;
					height: 150rpx;
				}
				.name {
					height: 60rpx;
					margin: 5rpx;
					font-size: 22rpx;
				}
				.price {
					padding: 0 5rpx;
					font-size: 24rpx;
				}
			}
		}
	}
}
</style>
